<template>
	<div class="header">
		<div class="header-left">
			<i class="iconfont back-icon">&#xe60f;</i>
		</div>
		<div class="header-input">
			<i class="iconfont">&#xe606;</i>
			输入城市/景点/游玩主题
		</div>
		<div class="header-right">
			城市
			<i class="iconfont city-icon">&#xe6bd;</i>
		</div>
	</div>
</template>

<script>
	export default{
		
	}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	@import "../assets/scss/variable.scss";
	$fs:64px;
	html{
	    font-size: $fs;
	}
	@function r($px){
	    @return $px/$fs*1rem;   
		
	}
	.header{
		display: flex;
		width: 100%;
		line-height: r(86px);
		color: #fff;
		font-size: r(24px);
		background: $bg-color;
		.header-left{
			width: r(64px);
			.back-icon{
				display: inline-block;
				width: 100%;
				text-align: center;
				font-size: r(40px);
			}
		}
		.header-input{
			flex: 1;
			margin: r(12px) 0 0 r(20px);
			padding-left: r(20px);
			height: r(62px);
			line-height: r(62px);
			background: #fff;
			border-radius: r(10px);
			color: #ccc;
		}
		.header-right{
			width: r(124px);
			text-align: center;
			.city-icon{
			font-size: r(24px);
			margin-left: r(-2px);
			}
		}
	}
</style>